<template>
  <el-menu class="wl-aside-menu" @select="menuItemClick">
    <template v-for="(menu, index) in menuList">
      <el-menu-item v-if="menu['childrenList'] && menu['childrenList'].length === 0" :index="index + 1 + ''">
        <el-button type="text" class="wl-menu-button">{{ menu['menuName'] }}</el-button>
      </el-menu-item>
      <el-submenu v-else :index="index + 1 +''">
        <template slot="title">
          <el-button type="text" class="wl-menu-button">{{ menu['menuName'] }}</el-button>
        </template>
        <el-menu-item v-for="(childMenu, childIndex) in menu['childrenList']"
                      :index="(index + 1) + '-' + (childIndex + 1)">
          <template slot="title">
            <el-button type="text" class="wl-menu-button">{{ childMenu['menuName'] }}</el-button>
          </template>
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
export default {
  name: "WlMenu",
  data() {
    return {
      menuList: [],
    }
  },
  mounted() {
    this.getMenuList()
  },
  methods: {
    getMenuList() {
      let that = this;
      this.$request.get('/api/system/menu/listAll').then(res => {
        that.menuList = res.content;
      })
    },
    menuItemClick(index) {
      if (index.indexOf("-") === -1) {
        let menuName = this.menuList[parseInt(index) - 1]
      }
    },
  }
}
</script>

<style>
.wl-aside-menu {
  height: 100%;
  border: none;
  background-color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(rgba(31, 42, 64, 1) 15%, rgb(63, 85, 130) 70%, rgb(100, 136, 206));
}

.wl-aside-menu .el-submenu__title, .wl-aside-menu .el-menu-item {
  color: rgb(232, 228, 228);
}

.wl-menu-button {
  color: white;
}

.wl-aside-menu .el-submenu__title:hover, .wl-aside-menu .el-menu-item:hover {
  color: white;
  background-color: rgba(0, 175, 255, 0.5);
}

.el-menu--inline {
  background: rgba(0, 0, 0, 0);
}
</style>
